<template>
  <div class="topbar">
    <div class="container">
      <div class="topbar-inner">
        <div
          class="row align-items-center justify-content-center justify-content-lg-between"
        >
          <div class="topbar-item">
            <div class="topbar-brand">
              <a href="index.html">
                <img :src="require('assets/images/logo.png')" alt="logo" />
              </a>
            </div>
          </div>
          <div class="topbar-item">
            <div class="topbar-search">
              <form>
                <input
                  type="text"
                  class="form-control"
                  placeholder="Search product"
                />
                <button class="btn main-btn" type="submit">Search</button>
              </form>
            </div>
          </div>
          <div class="topbar-item topbar-item-rightside">
            <div class="topbar-action">
              <div class="topbar-action-item">
                <a href="javascript:;" @click="$jumpLink('/')">
                  <i class="flaticon-user"></i>
                  <span>Account</span>
                </a>
              </div>
              <div class="topbar-action-item">
                <a
                  @click="$jumpLink('/shop/shop-wishlist')"
                  href="javascript:;"
                >
                  <i class="flaticon-like"></i>
                  <span>Wishlist</span>
                  <span class="topbar-action-counter">
                    {{ wishlistCount }}
                  </span>
                </a>
              </div>
              <div class="topbar-action-item cart-option-dropdown">
                <a
                  class="cartbtn"
                  @click="$jumpLink('/shop/shop-cart')"
                  href="javascript:;"
                >
                  <i class="flaticon-shopping-cart"></i>
                  <span>Cart</span>
                  <span class="topbar-action-counter">
                    {{ cartCount }}
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  wishlistCount: computed(() => shopStore.wishlistCount),
  cartCount: computed(() => shopStore.cartCount),
});
const { wishlistCount, cartCount } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
